import React from 'react';
import ReactDOM from 'react-dom';
import { CSSTransition } from 'react-transition-group';
import Mask from '../mask';
import './index.less';
import ToastLoading from '@/assets/icon/ToastLoading.png';

export interface NotificationProps {
  prefixCls?: string;
  style?: React.CSSProperties;
  icon?: string;
  message: string;
  bottom?: boolean;
  duration?: number;
  onClose: () => {};
  className?: string;
  /**
   * mask层的动画，默认为fade
   */
  maskTransition: string;
  /**
   * 点击遮罩层是否关闭
   */
  maskCloseable?: boolean;
  onCancel?: (e: React.TouchEvent<HTMLDivElement>) => void;
}

interface State {
  show: boolean;
  changeMessage: string;
}

export default class Notification extends React.PureComponent<
  NotificationProps,
  State
> {
  static defaultProps = {
    prefixCls: 'Yep-toast',
    style: {},
    bottom: false,
    duration: 1.5,
    maskTransition: 'fade',
    maskCloseable: true
  };
  private closeTimer: number | undefined;
  static newInstance: (properties: any, callback: any) => void;
  constructor(props: NotificationProps) {
    super(props);
    this.close = this.close.bind(this);
    this.startCloseTimer = this.startCloseTimer.bind(this);
    this.clearCloseTimer = this.clearCloseTimer.bind(this);
    this.close = this.close.bind(this);
    this.state = {
      show: true,
      changeMessage: ''
    };
  }
  onMaskClick = (e: any) => {
    const { maskCloseable, onCancel } = this.props;
    if (e.target === e.currentTarget && maskCloseable && onCancel) {
      onCancel(e);
    }
  };
  close() {
    this.setState({
      show: false
    });
    this.clearCloseTimer();
    this.props.onClose();
  }

  startCloseTimer() {
    const { duration } = this.props;
    if (duration) {
      this.closeTimer = window.setTimeout(() => {
        this.close();
      }, duration * 1000);
    }
  }

  clearCloseTimer() {
    if (this.closeTimer) {
      clearTimeout(this.closeTimer);
      this.closeTimer = -1;
    }
  }
  changeMessage(changeMessage: any) {
    this.setState({
      changeMessage
    });
  }
  componentDidMount() {
    this.startCloseTimer();
  }

  componentWillUnmount() {
    this.clearCloseTimer();
  }

  render() {
    const { message, maskTransition } = this.props;
    const { show, changeMessage } = this.state;
    return (
      <div className="notification_instance_wrapper">
        <CSSTransition
          in={show}
          timeout={300}
          classNames="fade"
          unmountOnExit={true}
        >
          <div className="notification_instance">
            <div className="notification_instance-notice">
              <img
                className="notification_instance-notice-icon"
                src={ToastLoading}
                alt=""
              />
              <div className={'notification_instance-notice-message'}>
                {changeMessage ? changeMessage : message}
              </div>
            </div>
          </div>
        </CSSTransition>
        <CSSTransition
          in={show}
          timeout={300}
          classNames={maskTransition}
          unmountOnExit={true}
        >
          <Mask onClick={this.onMaskClick} />
        </CSSTransition>
      </div>
    );
  }
}

Notification.newInstance = (properties, callback) => {
  const div = document.createElement('div');
  document.body.appendChild(div);

  let called = false;
  function ref(instance: any) {
    if (called) {
      return;
    }
    called = true;

    callback({
      component: instance,
      destroy() {
        ReactDOM.unmountComponentAtNode(div);
        div && div.parentNode && div.parentNode.removeChild(div);
      }
    });
  }

  ReactDOM.render(<Notification {...properties} ref={ref} />, div);
};
